<template>
    <div id="baolist1">
        <div class="list" v-for="(item,index) in arr" :key="index">
            <img :src="item.picture">
            <span class="local">{{item.id}}</span>
            <h4>{{item.name}}</h4>
            <span class="s1">爆爆团价</span>
            <p>
                <span class="money">￥{{item.min_price}}</span>
                <span class="discount" v-show="item.promotion_info!=''">{{item.promotion_info}}</span>
            </p>
            <span class="sell">已售{{item.month_saled}}份</span>
            <p class="price">￥{{item.min_price}}</p>
            <button>马上抢</button>
        </div>

    </div>
  
</template>

<script>
import {tuan_list} from '../../utils/api.js'

export default {    
    data(){
        return {
            arr:[],
        }
    },
    mounted(){
        tuan_list({status:0}).then((res)=>{
            this.arr=res.data.list;
        })
    }
}
</script>

<style lang="scss" scoped>
    #app{
        width: 94%;
        margin: auto;
    }
    .list {
              height: 160px;
                border: 1px black solid;
                margin: 10px 0;
                border-radius: 10px;
                position: relative;
          }
           .list  img{
              height: 140px;
              width: 140px;
              float: left;
              margin:5px;
          }
          .list .local{
            font-size: 12px;
            color: #959595;
          }
          .list h4{
            margin: 5px 0;
          }
           .list  .score{
              font-size: 12px;
              color: red;
              display: inline-block;
              margin-top: 10px;
          }

          
          .list p{
            position: absolute;
            bottom: 40px;
            left: 147px;
          }
          .list .s1{
            color: red;
            font-size: 14px;
            position: absolute;
            right: 145px;
            top: 53px;
          }
        .list p .money {
            color:red;
            font-size: 20px;
            margin-right:5px;
        }
        .list p .discount{
            border: 1px red solid;
            overflow: hidden;
            white-space: nowrap;
            border-radius: 5px;
            width: 30px;
            text-align: center;
            color: #f00;
            font-size: 12px;
        }
        .list .price{
            text-decoration-line: line-through;
            color: gainsboro;
            font-size: 14px;
            position: absolute;
            bottom: 16px;
            left: 150px;
        }
        button{
            border: none;
            background: red;
            color: #fff;
            width: 68px;
            height: 32px;
            border-radius: 30px;
            position: absolute;
            right: 1%;
            bottom: 32%;
        }
        .list  .sell{
            font-size: 12px;
            color: #f00;
            position: absolute;
            right: 3%;
            bottom: 17%;
        }
</style>